import { ElDialog } from "element-plus";
import {
  createVNode,
  defineComponent,
  onUnmounted,
  reactive,
  ref,
  render,
} from "vue";

let Dialog = defineComponent({
  props: ["visible"],
  setup(props, ctx) {
    let state = reactive({ visible: true });

    const show = (s: boolean) => {
      state.visible = s;
    };
    ctx.expose({ show });

    return () => {
      return (
        <ElDialog v-model={state.visible} title="Outer Dialog">
          123
        </ElDialog>
      );
    };
  },
});

let vm: any;

function openDialog() {
  if (!vm) {
    vm = createVNode(<Dialog></Dialog>);
    let div = document.createElement("div");
    document.body.appendChild(div);
    render(vm, div);
  } else {
    let { show } = vm.component.exposed;
    show(true); // 其他说明组件已经有了只需要显示出来即可
  }
}

export default openDialog;
